import React, { Component } from 'react';
// hoc就是higherOrderComponent，高阶组件。它是一个函数，参数是组件，返回值也是组件；作用是扩充组件

class Com1 extends Component {
  render() {
    return (
      <div>
        我是一个子组件-Com1
      </div>
    );
  }
}

class Com2 extends Component {
  render() {
    return (
      <div>
        我是一个子组件-Com2
      </div>
    );
  }
}
// 这个就是高阶组件，唯一的作用就是加一行h1标签
function fn (C) {
  return class extends Component {
    render() {
      return (
        <div>
          <h1>这是HOC添加的一行代码</h1>
          <C></C>
        </div>
      );
    }
  }
}
// 使用高阶组件处理组件，得到一个更强大的组件
const FnCom1 = fn(Com1); // Com1是原始的组件，FnCom1是处理后的组件
const FnCom2 = fn(Com2);
class Hoc extends Component {
  render() {
    return (
      <div>
        <p>我是高阶组件的内容</p>
        <FnCom1></FnCom1>
        <FnCom2></FnCom2>
      </div>
    );
  }
}

export default Hoc;
